<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        padding: 0;
        margin: 0;
    }
/*     //防止鼠标双击选中文字
     */    div {

        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
    }
   /*  //来自animated.css的样式 */
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }

    @keyframes bounceInDown {
        from,
        60%,
        75%,
        90%,
        to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity: 0;
            transform: translate3d(0, -3000px, 0);
        }

        60% {
            opacity: 1;
            transform: translate3d(0, 25px, 0);
        }

        75% {
            transform: translate3d(0, -10px, 0);
        }

        90% {
            transform: translate3d(0, 5px, 0);
        }

        to {
            transform: none;
        }
    }

    .bounceInDown {
        animation-name: bounceInDown;
    }
    </style>
</head>

<body>
    <script type="text/javascript">
    window.alert = function(text) {
        //透明遮罩层
        var p = document.createElement("p");
        p.style.position = " fixed";
        p.style.zIndex = 1000000;
        p.style.top = 0;
        p.style.bottom = 0;
        p.style.left = 0;
        p.style.right = 0;
        //实现alert
        var div = document.createElement("div");
        div.style.backgroundColor = " #22b9ff";
        div.style.color = " #fff";
        div.style.position = " fixed";
        div.style.zIndex = 9999999;
        div.style.height = " 60px";
        div.style.top = " 10%";
        div.style.left = "50%";
        div.style.lineHeight = " 60px";
        div.style.borderRadius = " 4px";
        div.style.fontSize = " 20px";
        div.style.textAlign = "center";
        div.style.padding = "0 10px";
        div.className = "animated  bounceInDown";
        div.id = "alert";
        div.innerHTML = text;
        document.getElementsByTagName("body")[0].appendChild(div);
        document.getElementsByTagName("body")[0].appendChild(p);
        var selfObj = document.getElementById("alert");
        //动态调整位置
        var alertWidth = window.getComputedStyle(selfObj, null).width;
        div.style.marginLeft = -parseInt(alertWidth) / 2 + "px";
        setTimeout(function() {
            document.getElementsByTagName("body")[0].removeChild(div);
            document.getElementsByTagName("body")[0].removeChild(p);
        }, 3000);
    }
    alert("这是自定义的alert");
    console.log("nihao");
    </script>
</body>

</html>